import React, { useEffect, useState } from "react";
import { Search, Toast, Cell } from "react-vant";
import { Down } from "@react-vant/icons";
import "./index.css";
import { useNavigate } from "react-router-dom";
import axios from "axios";
const Index: React.FC = () => {
  const [value, setValue] = useState("");
  const [list, setList] = useState([]);
  const navigate = useNavigate();
  const render = () => {
    axios.get("/api/sslist").then((resp) => {
      setList(resp.data.sslist);
    });
  };
  useEffect(() => {
    render();
  }, []);
  const ss = (value: any) => {
    axios.get("/api/search", { params: { value } }).then((resp) => {
      setList(resp.data.items);
    });
  };
  const fh = () => {
    navigate(-1);
  };
  return (
    <div>
      <div className="ssk">
        <Search
          showAction
          label={
            <Down
              onPointerEnterCapture={undefined}
              onPointerLeaveCapture={undefined}
              onClick={() => fh()}
            />
          }
          actionText={<div onClick={() => ss(value)}>搜索</div>}
          value={value}
          onChange={setValue}
          placeholder="请输入搜索关键词"
        />
      </div>
      <div>{list.length > 0 && list.map((v, i) => <Cell title={v} />)}</div>
    </div>
  );
};
export default Index;
